<template>
	<view class="card">
		<!-- is-full:或写作ifFull,是否为通栏卡片 -->
		<uni-card isFull padding="0">
			<view class="header" slot="title">
				<image class="icon" src="../../static/img/img/computer_icon.png" mode="widthFix"></image>
				<text class="title">{{title}}</text>
				<navigator class="more" url="../../pages/list/list">更多</navigator>
			</view>
			<!-- square:是否显示为方形 -->
			<!-- showBorder:是否显示边框 -->
			<uni-grid :column="2" :square="false" :showBorder="false">
				<uni-grid-item class="grid-item" v-for="(p,i) in data" :key="i">
					<!-- 每个宫格项中渲染一个卡片对象 -->
					<uni-card padding="0" margin="0" class="product-card">
						<image class="pic" :src="base + p.pic" mode="heightFix"></image>
						<text class="title">{{p.title}}</text>
						<view class="bottom">
							<text class="price">￥{{p.price}}</text>
							<button class="btn" type="primary" size="mini" @click="showDetails(p.pid)">查看详情</button>
						</view>
					</uni-card>
				</uni-grid-item>
			</uni-grid>
		</uni-card>
	</view>
</template>

<script>
	import {
		base
	} from '../../service';
	export default {
		//声明自组件的属性 -- 父组件可以通过子组件的属性传递数据
		// props:["title","data"],
		props: {
			title: {
				type: String, //控制属性的类型
				required: false, //是否是必需的属性
				default: '卡片标题' //如果父组件为提供该属性,器默认值是什么
			},
			data: {
				type: Array,
				required: true
			}
		},
		name: "xzProductCard",
		data() {
			return {
				base: base
			};
		},
		methods: {
			showDetails(num) {
				//跳转到详情页,并且携带路由参数 -- 要查询的商品的编号
				uni.navigateTo({
					url:'/pages/details/details?pid=' + num
				})
			}
		},
	}
</script>

<style lang="scss">
	.card {
		padding: $uni-spacing-col-base 0;

		.header {
			padding: $uni-spacing-col-base $uni-spacing-row-sm;
			border-bottom: $uni-border-width $uni-border-style $uni-border-color;
			//view默认已经改为弹性容器,主轴方向改为纵向,此处应该修改为横向
			flex-direction: row;
			//子元素在交叉轴方向上对齐方式:居中
			align-items: center;

			.icon {
				width: $uni-img-size-base;
			}

			.title {
				flex: 1;
				margin-left: $uni-spacing-row-sm;
				font-weight: bold;
			}

			.more {
				color: $uni-text-color-grey;
				font-size: $uni-font-size-sm;
			}
		}

		.grid-item {
			padding: $uni-spacing-col-sm $uni-spacing-row-sm;
			.product-card{
				padding: $uni-spacing-col-base $uni-spacing-row-base !important;
			}

			.pic {
				height: 180rpx;
				//弹性子元素
				margin: auto;
			}

			.title {
				/*文本仅允许显示1行,溢出的话用省略号代替*/
				white-space: nowrap; //文字空白处不要换行
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出的话,显示省略号
			}

			.bottom {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: $uni-spacing-col-base;

				.price {
					font-size: $uni-font-size-sm;
					font-weight: bold;
					color: $uni-color-primary;
				}

				.btn {
					padding: 0 $uni-spacing-row-base;
					margin: 0;
					font-size: $uni-font-size-sm;
				}
			}

		}
	}
</style>
